<template>
	<div>
		<div class="chat-input" id="chat-input">
			<div class="input-wrapper">
				<div class="choose-pic" @click="toShowOther">
					<image src="../static/icon/icon_liaotian_jianpan.png" alt="" :lazy-load="true" />
				</div>
				<div class="text-area-input">
					<textarea :maxlength="-1" :auto-height="true" :value="value" :placeholder="placeholder"
						@blur="handlerBlur" @input="handlerInput" @focus="handlerFocus" @linechange="handlerLineChange"
						:show-confirm-bar="false"></textarea>
				</div>

				<div class="send-btn" @click="handlerSend(1)">发送</div>
			</div>
			<div class="send-other" v-if="showOther">
				<div class="send-item" @click="handlerUploadPic">
					<image src="/static/icon/send-pic.png" mode=""></image>
					<span>相册</span>
				</div>
				<div class="send-item" @click="handerCameraUpload">
					<image src="/static/icon/send-cam.png" mode=""></image>
					<span>拍摄</span>
				</div>
				<div class="send-item" @click="showShop">
					<image src="/static/icon/send-baby.png" mode=""></image>
					<span>宝贝</span>
				</div>
				<div class="send-item" @click="toSendMoney">
					<image src="/static/icon/send-baby.png" mode=""></image>
					<span>红包</span>
				</div>
			</div>
		</div>
		<!-- @好友弹窗 -->
		<shopPopup ref="shopPop" :selected="[]" @getData="selectShop">
		</shopPopup>
		<!-- 红包弹窗 -->
		<uni-popup ref="price" type="center" :maskClick="true">
			<div class="setPrice">
				<div class="price-title">红包</div>
				<div class="wrap-input">
					<input type="digit" v-model="packetAmount" placeholder-style="font-size: 20rpx;color: #BCBCBC;"
						placeholder="请输入红包金额" @input="checkedAmount" />
				</div>
				<div class="vice-title">请谨慎操作，避免钱货两失去</div>
				<div class="pay">
					共支付：<span>{{packetAmount || 0}}元</span>
				</div>
				<div class="bottom">
					<span class="cannel" @click="delMoney()">取消</span>
					<span class="yes on" @click="confirmMoney()">支付</span>
				</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
	import shopPopup from "@/components/shop-popup.vue";
	export default {
		data() {
			return {
				showOther: false,
				textareaHeight: 0,
				packetAmount: ''
			};
		},
		props: {
			placeholder: {
				type: String,
				default: () => {
					return '请输入内容...';
				}
			},
			value: {},
			commonLanguage: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		components: {
			shopPopup
		},
		methods: {
			handlerBlur(e) {
				this.$emit('blur', e.detail.value);
			},
			handlerInput(e) {
				let str = e.detail.value;
				this.$emit('input', str);
			},
			handlerFocus() {
				this.showOther = false;
				this.$emit('focus', 1);
			},
			handlerSend(e) {
				this.$emit('send', e);
			},
			handlerUploadPic() {
				let that = this;
				that.$httpRequest.handlerUploadPic(res => {
					if (res) {
						this.$emit('upload', res.data);
					}
				}, 2);
			},
			handerCameraUpload() {
				let that = this;
				that.$httpRequest.handlerUploadPic(res => {
					if (res) {
						this.$emit('upload', res.data);
					}
				}, 3);
			},
			handlerLineChange(e) {
				let max = uni.upx2px(135);
				this.textareaHeight = e.detail.height;
				this.textareaHeight = this.textareaHeight > max ? max : this.textareaHeight;
				let min = uni.upx2px(98);
				let result = this.textareaHeight + uni.upx2px(38);
				result = result < min ? min : result;
				if (this.showOther) {
					result = result + uni.upx2px(149)
				}
				this.$emit('linechange', result);
			},
			toShowOther() {
				this.showOther = !this.showOther
				this.computeHeight()
			},
			setShowOther(e) {
				this.showOther = e
				this.computeHeight()
			},
			showShop() {
				this.$refs.shopPop.show()
			},
			selectShop(e) {
				this.$refs.shopPop.close()
				this.$emit('getShop', e);
			},
			computeHeight() {
				if (this.showOther) {
					let max = uni.upx2px(135);
					this.textareaHeight = this.textareaHeight > max ? max : this.textareaHeight;
					let min = uni.upx2px(98);
					let result = this.textareaHeight + uni.upx2px(38);
					result = result < min ? min : result;
					result = result + uni.upx2px(300)
					this.$emit('linechange', result);
				} else {
					let max = uni.upx2px(135);
					this.textareaHeight = this.textareaHeight > max ? max : this.textareaHeight;
					let min = uni.upx2px(98);
					let result = this.textareaHeight + uni.upx2px(38);
					result = result < min ? min : result;
					this.$emit('linechange', result);
				}
			},
			toSendMoney() {
				this.$refs.price.open()
			},
			//设置红包金额开始 ===========>
			checkedAmount(el) {
				// if (el.target.value > 200) {
				// 	this.$nextTick(() => {
				// 		this.packetAmount = 200
				// 	})

				// } else {
				// 	this.$nextTick(() => {
				// 		this.packetAmount = el.target.value
				// 	})
				// }
			},
			confirmMoney() {
				if (!this.packetAmount) {
					this.$toast.msg('请输入单个红包金额', {
						icon: 1
					})
					return false
				}
				this.$emit('sendMoney', this.packetAmount)
				this.$refs.price.close()

			},
			delMoney() {
				this.packetAmount = '' //单个红包金额
				this.$refs.price.close()
			},
		},
		mounted() {
			// this.textareaHeight = uni.upx2px(Math.ceil(this.$utils.getStrCharLen(this.value) / 30) * 42)
		}
	};
</script>

<style scoped lang="scss">
	.chat-input {
		width: 100%;
		min-height: 106upx;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 50;

		.input-wrapper {
			display: flex;
			justify-content: space-between;
			padding: 0 20upx;
			box-sizing: border-box;
			align-items: center;
		}

		.choose-pic {
			width: 48upx;
			height: 48upx;
			font-size: 0;
			padding: 25upx 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.text-area-input {
			flex: 1;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			background: #F4F4F5;
			border-radius: 50rpx;
			margin-left: 24rpx;

			textarea {
				width: 100%;
				// height: 42upx;
				min-height: 48upx;
				max-height: 135upx;
				padding: 0 5upx;
				resize: none;
				font-size: 26upx;
				line-height: 42upx;
				color: #000;
				border: none;
				margin: 0;
				outline: none;
				overflow: hidden;
			}
		}

		.common-language {
			font-size: 0;
			width: 48upx;
			height: 48upx;
			padding: 25upx 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.send-btn {
			width: 120rpx;
			height: 65rpx;
			border-radius: 100rpx;
			font-size: 28rpx;
			font-weight: normal;
			line-height: 32rpx;
			letter-spacing: 0em;
			color: #FFFFFF;
			text-align: center;
			background: linear-gradient(180deg, #EC6A0A 0%, #FB8E26 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;
		}
	}

	@keyframes mymove {
		0% {
			bottom: -100%;
		}

		100% {
			bottom: 0;
		}
	}

	.c-l-warp-modal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;

		.cl-warpX.on {
			bottom: 0;
			animation: mymove 0.5s 1;
		}

		.cl-warpX {
			width: 100%;
			background: #f6f6f6;
			padding: 0 20upx;
			box-sizing: border-box;
			position: fixed;
			bottom: -100%;
			left: 0;

			.title {
				width: 100%;
				font-size: 36upx;
				color: #999;
				line-height: 50upx;
				padding-top: 46upx;
				padding-bottom: 10upx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.cl-list-X {
				width: 100%;

				.cl-item-X {
					width: 100%;
					height: 80upx;
					border-bottom: 1px solid #d6d6d6;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #000;
					line-height: 42upx;
					font-size: 30upx;

					&:last-child {
						border-bottom: none;
					}

					&:active {
						color: #fff;
						background: #1C1C1C;
					}
				}
			}
		}
	}

	.send-other {
		display: flex;
		width: 100%;
		background: rgb(247, 247, 247);
		padding: 70rpx 0;
		padding-left: 30rpx;

		.send-item {
			width: 105rpx;
			margin: 0 34rpx;

			image {
				width: 105rpx;
				height: 105rpx;
			}

			span {
				display: inline-block;
				width: 100%;
				margin-top: 16rpx;
				font-size: 22rpx;
				font-weight: normal;
				line-height: normal;
				color: #6C6C6C;
				text-align: center;
			}
		}
	}

	// 红包弹窗
	.setPrice {
		width: 600rpx;
		padding: 65rpx 50rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 10rpx;

		.wrap-input {
			width: 100%;
			height: 84rpx;
			background: #F4F4F5;
			border-radius: 10rpx;

			input {
				padding: 0 30rpx;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				font-size: 28upx;
				line-height: 1;
				color: #000;
			}
		}

		.price-title {
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #3B3B3B;
			line-height: 40rpx;
			margin-bottom: 20rpx;
		}

		.vice-title {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: rgba(255, 34, 52, 1);
			line-height: 28rpx;
		}

		.pay {
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 28px;

			span {
				color: rgba(255, 34, 52, 1);
			}
		}

		.bottom {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: 500;
			color: #BCBCBC;
			padding: 10rpx;
			box-sizing: border-box;
			line-height: 40rpx;

			.on {
				width: 60px;
				height: 32px;
				border-radius: 50px;
				font-size: 26rpx;
				font-weight: normal;
				line-height: 16px;
				letter-spacing: 0em;
				color: #FFFFFF;
				text-align: center;
				background: linear-gradient(180deg, #EC6A0A 0%, #FB8E26 100%);
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>